<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tree-vertical</title>
		<link href="css/index-style.css" rel="stylesheet" />
	<style type="text/css">
		.xyli2{
			display: flex;
			justify-content: space-around;
		}
	</style>	
	</head>
	<body>
		<head>
			<button id="back">返回</button>
			<span>市场架构</span>
		</head>
		<nav>
			<input class="text" type="text" name="" id="userid" value="" placeholder="请输入用户" required />
			<input id="query" class="button" type="button" value="查询" onclick="re" />
			<input id="top-floor" class="button" type="button" value="顶层" />
			<input id="Upper-story" class="button" type="button" value="上一层" />
		</nav>
		<div id='app'>
			<div class="tree">
				<!-- 第一层 -->
				<ul id="lay_0">
				</ul>
			</div>
		</div>
		<footer>
			<p>
				<a href="#">Copyright © 2019</a>
				<a href="#">会员管理系统</a> </p>
		</footer>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			document.cookie ='SESSION=a02d9f0a-0e92-408f-9d69-bc5bd562f029;path=/carbon/'
			obtain_date();
		}
		/* 获取接口数据 */
		function obtain_date(res  ) {

			var url = "back.json";
			var xhr = new XMLHttpRequest();
			var data={"mobile":"15000000000"};
			xhr.open("GET", url, true);
			 // 添加http头，发送信息至服务器时内容编码类型
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
			xhr.send();
			xhr.onreadystatechange = function() {
				// readyState == 4说明请求已完成
				if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
					// 从服务器获得数据 
					var data = xhr.responseText;
					//console.log(data);
					first_node(JSON.parse(data).data);
				}
			};
		}
		function first_node(res){
			let li = document.createElement('li');
			li.innerHTML ="<div class='box'>"+
						"<div class='ul'>"+
							"账户："+res.data.account+
						"</div><div class='xyli2'>"+
							"<div class='m-font'>"+
								"通证：<span>"+res.data.beta+"</span>"+
							"</div>"+
							"<div class='m-font'>"+
								"资产:<span>"+res.data.alpha+"</span>"+
							"</div>"+
						"</div>"+
						"<div class='xyli2'>"+
							"<div class='m-font'>"+
								"大区业绩：<span>"+res.data.bigAlpha+"</span>"+
							"</div>"+
							"<div class='m-font'>"+
								"小区业绩:<span>"+res.data.smallAlpha+"</span>"+
							"</div>"+
						"</div>"+
						"<div class='xyli2'>"+
							"<div class='m-font'>"+
								"推荐人：<span>"+res.data.uid+"</span>"+
							"</div>"+
							"<div class='m-font'>"+
								"分享个数:<span>"+res.data.refereeNum+"</span>"+
							"</div>"+
						"</div></div>"+
						"<ul id='node_"+res.data.uid+"'></ul>";
			let element = document.getElementById("lay_0");
				element.appendChild(li);
			addnode(res,1);
		}
		
		/* 添加成员节点 */
		/**
		 * res:数据
		 * laynum:层级数
		 */
		function addnode(res) {
			console.log(res);
			/* 左节点 */
			if( typeof(res.personLeft) == 'undefined' || typeof(res.personLeft.data) == 'undefined'){
					let futher_node = res.data.uid;
					let li = document.createElement('li');
					li.id = "node_null"+futher_node;
					li.innerHTML = "<div class='box' onclick='go_url("+futher_node+","+0+")'>"+
								"<div class='ul'>"+
								"点击注册"+
								"</div>"+
							"</div>";
					let element = document.getElementById("node_"+futher_node);
						element.appendChild(li);
			}else{
				//console.log(res.data.uid);
				let futher_node = res.data.uid;
				let res_l = res.personLeft;
				let li = document.createElement('li');
				console.log('当前用户id：'+res.data.uid);
				li.id = 'self_'+res_l.data.uid;
				li.innerHTML = "<div class='box'>"+
							"<div class='ul'>"+
								"账户："+res_l.data.account+
							"</div><div class='xyli2'>"+
								"<div class='m-font'>"+
									"通证：<span>"+res_l.data.beta+"</span>"+
								"</div>"+
								"<div class='m-font'>"+
									"资产:<span>"+res_l.data.alpha+"</span>"+
								"</div>"+
							"</div>"+
							"<div class='xyli2'>"+
								"<div class='m-font'>"+
									"大区业绩：<span>"+res_l.data.bigAlpha+"</span>"+
								"</div>"+
								"<div class='m-font'>"+
									"小区业绩:<span>"+res_l.data.smallAlpha+"</span>"+
								"</div>"+
							"</div>"+
							"<div class='xyli2'>"+
								"<div class='m-font'>"+
									"推荐人：<span>"+res_l.data.uid+"</span>"+
								"</div>"+
								"<div class='m-font'>"+
									"分享个数:<span>"+res_l.data.refereeNum+"</span>"+
								"</div>"+
							"</div>"+
						"</div>"+
						"<ul id='node_"+res_l.data.uid+"'></ul>";
				let element = document.getElementById("node_"+futher_node);
					element.appendChild(li);
				addnode(res_l)	
			}
			/* 右节点 */
			if( typeof(res.personRight) == 'undefined' || typeof(res.personRight.data) == 'undefined'){
				let futher_node = res.data.uid;
				console.log('我是右空：');
				console.log(res);
				let li = document.createElement('li');
				li.id = "node_null"+futher_node;
				li.innerHTML = "<div class='box' onclick='go_url(&quot;"+res.data.username+"&quot; ,"+1+")'>"+
							"<div class='ul'>"+
							"点击注册"+
							"</div>"+
						"</div>";
				let element = document.getElementById("node_"+futher_node);
					element.appendChild(li);
			}
			else{
				//console.log('我的父节点:'+res.data.uid+'我的是右：'+res.personRight.data.uid);
				//console.log(res.data.uid);
				let futher_node = res.data.uid;
				res = res.personRight;
				let li = document.createElement('li');
				li.id = "self_" + res.data.uid;
				li.innerHTML = "<div class='box' onclick=''>"+
							"<div class='ul'>"+
								"账户："+res.data.account+
							"</div><div class='xyli2'>"+
								"<div class='m-font'>"+
									"通证：<span>"+res.data.beta+"</span>"+
								"</div>"+
								"<div class='m-font'>"+
									"资产:<span>"+res.data.alpha+"</span>"+
								"</div>"+
							"</div>"+
							"<div class='xyli2'>"+
								"<div class='m-font'>"+
									"大区业绩：<span>"+res.data.bigAlpha+"</span>"+
								"</div>"+
								"<div class='m-font'>"+
									"小区业绩:<span>"+res.data.smallAlpha+"</span>"+
								"</div>"+
							"</div>"+
							"<div class='xyli2'>"+
								"<div class='m-font'>"+
									"推荐人：<span>"+res.data.uid+"</span>"+
								"</div>"+
								"<div class='m-font'>"+
									"分享个数:<span>"+res.data.refereeNum+"</span>"+
								"</div>"+
							"</div>"+
						"</div>"+
						"<ul id='node_"+res.data.uid+"'></ul>"
				let element = document.getElementById("node_"+futher_node);
					element.appendChild(li);
				addnode(res)		
			}
			return;
		}
		/* 点击注册跳转页面 */
		/* 
		 *futher_noder:父节点
		 * place:0--左节点  1--右节点
		 */
		function go_url(futher_node,place){
			alert('我的父节点是：'+futher_node+'我的位置是：'+place);
		}
	</script>
</html>
